<template>
  <nav
    class="zk_fixed_nav"
    :class="{ zk_set_fixed: fixed, zk_fixed_border: !props.backgroundColor && fixed }"
    :style="{
      'background-color': `${props.backgroundColor}`,
    }"
  >
    <slot></slot>
  </nav>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'

const props = defineProps({
  height: {
    // 浮现距离
    type: Number,
    default: 0,
  },
  backgroundColor: {
    type: String,
    default: '',
  }
})

const fixed = ref(false)

onBeforeMount(() => {
  window.addEventListener('scroll', () => {
    zk_fixed_nav()
  })
})

const zk_fixed_nav = () => {
  if (!props.height) {
    return
  }
  fixed.value = window.scrollY > props.height
}
</script>

<style lang="scss" scoped>
.zk_fixed_nav {
  width: 100%;
}
.zk_set_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9;
}
.zk_fixed_border {
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}
</style>
